<template>
  <div class="y-comment">
    <div class="y-comment-main">
      <CommentItem :item="commentItem" @delete="handleDelete" @like="handleLike" @send="handleSend"></CommentItem>
    </div>
    <div class="y-comment-reply">
      <CommentItem v-for="(childComment,index) in commentItem.child" :item="childComment" @delete="handleDelete"
                   @like="handleLike" @send="handleSend"></CommentItem>
    </div>
  </div>
</template>

<script>
import YImage from "@/components/image/YImage.vue";
import CommentItem from "@/components/Comment/CommentItem.vue";

let user = {
  id: 3,
  name: "罗海茂",
  avatar: "https://img1.baidu.com/it/u=1268603822,1552453616&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
}
export default {
  name: "Comment",
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          user: user,
          comment: {
            content: "缘生缘灭，缘起缘落，我在看别人的故事，别人何尝不是在看我的故事?别人在演绎人生，我又何尝不是在这场戏里?谁的眼神沧桑了谁?",
            createTime: new Date(1682082431856),
            level: 1,
            likeNum: 4
          },
          sender: {
            id: 1,
            name: "hustart",
            avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F827b6ef7-cc0b-464c-9797-00496fe4f0e6%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684651953&t=34686210c93f7342b42bd4a147e9876d"
          },
          receiver: {
            id: 2,
            name: "yangkun",
            avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F827b6ef7-cc0b-464c-9797-00496fe4f0e6%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684651953&t=34686210c93f7342b42bd4a147e9876d"
          },
          child: [

            {
              user: user,
              comment: {
                content: "你在说什么?",
                createTime: new Date(1682082431856),
                level: 2,
                likeNum: 2
              },
              sender: {
                id: 2,
                name: "yangkun",
                avatar: "https://img1.baidu.com/it/u=3768804500,181908195&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              },
              receiver: {
                id: 1,
                name: "hustart",
                avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F827b6ef7-cc0b-464c-9797-00496fe4f0e6%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684651953&t=34686210c93f7342b42bd4a147e9876d"
              },
            },

            {
              user: user,
              comment: {

                content: "你不管嘛",
                createTime: new Date(1682071131856),
                level: 3,
                likeNum: 2
              },
              sender: {
                id: 1,
                name: "hustart",
                avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F827b6ef7-cc0b-464c-9797-00496fe4f0e6%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684651953&t=34686210c93f7342b42bd4a147e9876d"
              },
              receiver: {
                id: 2,
                name: "yangkun",
                avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F827b6ef7-cc0b-464c-9797-00496fe4f0e6%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684651953&t=34686210c93f7342b42bd4a147e9876d"
              },
            }
          ]
        }
      }
    }
  },
  components: {CommentItem, YImage},
  data() {
    return {
      commentItem: this.$props.item
    }
  },
  methods: {
    handleSend(obj) {
      console.log('send', obj)
      this.commentItem.child.push({
        user: user,
        sender: {
          id: 3,
          name: "罗海茂",
          avatar: "https://img1.baidu.com/it/u=1268603822,1552453616&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        },
        receiver: obj.receiver,
        comment: {
          createTime: new Date(),
          content: obj.value,
          level: (obj.comment.level + 1) > 3 ? 3 : obj.comment.level + 1,
        }
      })


    },
    handleLike(obj) {
      console.log('like', obj)
      if (obj.like) {
        obj.comment.likeNum++
      } else {
        obj.comment.likeNum--
      }

    },
    handleDelete(obj) {

      let arr = this.commentItem.child

      arr.splice(arr.indexOf(obj), 1)
    }
  },
  computed: {},
  mounted() {

  },
  watch: {
    item(newV) {
      this.commentItem = newV
    }
  }
}
</script>

<style scoped lang="less">
.y-comment {

  min-width: 700px;
  min-height: 200px;
  display: flex;
  flex-direction: column;

  .y-comment-main {

  }

  .y-comment-reply {
    width: 90%;
    padding: 10px;
    padding-bottom: 0;
    background-color: #F7F7F7;
    margin-left: 10%;
  }

}
</style>